<script setup>
import { ref } from 'vue';
import { useAdmerStore } from '@/stores/admerStore'
import { admerLoginAPI } from "@/apis/admer"
import router from '@/router';
const admerInfo = useAdmerStore().admerInfo
const switchPlatform = () => {
    ElMessageBox.confirm('切换到用户平台？', '欢迎您！',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    ).then(() => {
        router.replace({ path: '/home' })
    })

}
const form = ref({
    account: 'hbnu123456',
    password: '123456',
})
const rules = {
    account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { pattern: /^hbnu\d{6}$/, message: "格式错误", trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
}
const formRef = ref(null)
const doLogin = () => {
    const { account, password } = form.value
    // 调用实例方法
    formRef.value.validate(async (valid) => {
        // valid: 所有表单都通过校验  才为true

        // 以valid做为判断条件 如果通过校验才执行登录逻辑
        if (valid) {

            await useAdmerStore().admerLogin(account, password);
            console.log(useAdmerStore().admerInfo.code);
            if (useAdmerStore().admerInfo.code == 1) {
                ElMessage({ type: "success", message: '登录成功' })
                router.replace({ path: '/admerHome' })
            }
            else ElMessage({ type: "error", message: "账号密码错误" })
        }
    })
}
</script>
<template>
    <el-container>
        <el-header
            style="text-align: center; border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-icon style="position: fixed;top:10px;left:10px;color: #cdcdcd;" @click="switchPlatform">
                <SwitchFilled />
            </el-icon>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                管理员登录
            </p>
        </el-header>
        <el-main>
            <el-form ref="formRef" :model="form" :rules="rules"
                style="width: 500px;height: 200px;margin: 0px auto;padding:50px;box-shadow:0 10px 5px 5px #cdcdcd ;">
                <el-form-item prop="account" label="账户">
                    <el-input v-model="form.account" />
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" show-password v-model="form.password" />
                </el-form-item>
                <el-button size="large" type="primary" style="width:100%" @click="doLogin">点击登录</el-button>
            </el-form>
        </el-main>
    </el-container>
</template>